@config.main("Search By Condition") {

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Search By Condition")

            <div class="main-body">

                <form class="registration-form col-sm-12 my-form" id="form">

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title"> Species  :</label>
                        <div class="col-sm-5">
                            <select id="species" name="species" class="form-control">
                                <option value="Pumpkin">Pumpkin</option>
                                <option value="Cucumber">Cucumber</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title"> Mobile RNA  :</label>
                        <div class="col-sm-5">
                            <select id="rna" name="rna" class="form-control">
                                <option value="no">no</option>
                                <option value="Bidirection">Bidirection</option>
                                <option value="Root to Shoot">Root to Shoot</option>
                                <option value="Shoot to Root">Shoot to Root</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title"> TLS  :</label>
                        <div class="col-sm-5">
                            <select id="tls" name="tls" class="form-control">
                                <option value="no">no</option>
                                <option value="0">0</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="14">14</option>

                            </select>
                        </div>
                    </div>

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title"> GWAS SNP  :</label>
                        <div class="col-sm-5">
                            <select   name="snp" class="form-control">
                                <option value="no">no</option>
                                <option value="yes">yes</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title"> m5C :</label>
                        <div class="col-sm-5">
                            <select id="m5c" name="m5c" class="form-control">
                                <option value="m5g">Adult plant</option>
                                <option value="m5p">Vascular</option>
                                <option value="no">no</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-sm-12 form-group my-position">
                        <label class="col-sm-2 my-position-title"> m6A :</label>
                        <div class="col-sm-5">
                            <select id="m6a" name="m6a" class="form-control">
                                <option value="m6g">Adult plant</option>
                                <option value="m6p">Vascular</option>
                                <option value="no">no</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-12 form-group">
                        <label class="col-sm-2"></label>
                        <button type="button" class="btn my-btn" style="width: 200px" onclick="Run()">
                            Search</button>

                    </div>
                </form>

                <div id="result" class="result">
                    <hr/>

                    <h5>Result:</h5>

                    @components.table()
                </div>
            </div>
        </div>
    </div>

    <script>

            $(function () {

                let json = [
                    {"field": "func", "title": "Function"},
                    {"field": "snp", "title": "GWAS SNP"},
                    {"field": "qtl", "title": "QTL"}
                ]

                let checkbox = ""
                $.each(json, (i, v) => {

                    checkbox += `<div class="form-check"><label class="form-check-label">
                            <input type='checkbox' checked='checked' value="${v.field}"  onclick="setColumns('${v.field}')" id="${v.field}"> ${v.title}
                           <i class="input-helper"></i> </label></div>`
                })

                $("#table-check").html(checkbox)

                $("#table").bootstrapTable();

                $.each(json,(i,v)=>{
                    $("#" + v.field).click()
                })
            })


            function Run() {
                const index = MyTable.prototype.runningIcon()
                $.ajax({
                    url: "@routes.SearchController.searchByCondition()",
                    type: "post",
                    data: $("#form").serialize(),
                    success: function (data) {
                        layer.close(index)
                        $("#table").bootstrapTable("load", data)
                        $("#result").show()
                    }
                })

            }


            function GetGeneId(value, row) {
                return `<a href="/capdb/browse/geneInfoPage?id=${row.id}" target="_blank">${value}</a>`
            }

    </script>

}